<style>
.content {
	padding: 0 20px;
}
.input-row {
	margin-bottom: 15px;
}
.title {
	line-height: 24px;
	font-size: 20rpx;
}
</style>

<template>
	<view class="content login_area">
		<div class="logo"><img src="../../static/mpImgs/logo.png" /></div>
		<uni-forms ref="regRef" validateTrigger="blur" :modelValue="formData">
		<view class="input-group">
			<view class="input-row border">
				<uni-forms-item :label="$t('loginAndReg.account')" required name="account">
				<uni-easyinput type="text" v-model="formData.account" :title="$t('loginAndReg.accountTips')"></uni-easyinput>
				</uni-forms-item>
			</view>
			<view class="input-row border">
				<uni-forms-item :label="$t('loginAndReg.passwd')" required name="password">
					<uni-easyinput type="password" v-model="formData.password" :title="$t('loginAndReg.passwdTips')"></uni-easyinput>
				</uni-forms-item>
			</view>
			<view class="input-row">
				<uni-forms-item :label="$t('loginAndReg.rePasswd')" required name="confirmPassword">
					<uni-easyinput type="password" v-model="formData.confirmPassword" :title="$t('loginAndReg.rePasswdTips')"></uni-easyinput>
				</uni-forms-item>
			</view>
			<view class="input-row">
				<uni-forms-item :label="$t('loginAndReg.company')" required name="company">
					<uni-easyinput type="text" v-model="formData.company" :title="$t('loginAndReg.companyTips')"></uni-easyinput>
				</uni-forms-item>
			</view>
			<view class="input-row">
				<uni-forms-item :label="$t('loginAndReg.linkman')" required name="contactName">
					<uni-easyinput type="text" v-model="formData.contactName" :title="$t('loginAndReg.linkmanTips')"></uni-easyinput>
				</uni-forms-item>
			</view>
      <view class="input-row">
        <uni-forms-item :label="$t('loginAndReg.email')" required name="email">
          <uni-easyinput type="text" v-model="formData.email" :title="$t('loginAndReg.emailTips')"></uni-easyinput>
        </uni-forms-item>
      </view>
      <view class="input-row">
        <uni-forms-item :label="$t('loginAndReg.linkPhonePrefix')" required name="contactPhonePrefix">
          <uni-data-select
              v-model="formData.contactPhonePrefix"
              :localdata="spaceOptions"
              field="label as text"
              :placeholder="$t('common.pleaseSelect')"
          ></uni-data-select>
        </uni-forms-item>
      </view>
			<view class="input-row">
				<uni-forms-item :label="$t('loginAndReg.linkPhone')" required name="contactPhone">
					<uni-easyinput type="digit" v-model="formData.contactPhone" :title="$t('loginAndReg.linkPhoneTips')"></uni-easyinput>
				</uni-forms-item>
			</view>
		</view>
		<view class="btn-row">
			<button type="primary" class="primary" @click="register()">{{$t('loginAndReg.register')}}</button>
		</view>
		</uni-forms>
		<uni-popup ref="popup" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
import { hex_md5 } from '../../../utils/md5';
import { api } from '../../../utils/enums';
import { setTabbarItems } from '../../../utils/utils';
import {spaceOptions} from "../../../utils/spaceOption";

	export default {
		onShow() {
			setTabbarItems(this);
		},
		onLoad: function(){
		},
		data() {
      const that = this;
			return {
				formData: {
					account: '',
					password: '',
					confirmPassword: '',
					company: '',
					contactName: '',
          contactPhonePrefix:'中国 +86',
					contactPhone: '',
          email:''
				},
				msgType: '',
				messageText: '',
        spaceOptions,
				formRules: {
					account: {
						rules: [{
							required: true,
							errorMessage: this.$t('loginAndReg.accountTips'),
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: this.$t('loginAndReg.passwdTips'),
						}, {
							validateFunction: (rule, value, data, callback) => {
								callback()
								return true;
							},
						}
						]
					},
					confirmPassword: {
						rules: [{
							required: true,
							errorMessage: this.$t('loginAndReg.rePasswdTips'),
						}, {
							validateFunction: (rule, value, { password }, callback) => {
								if (password && value) {
									if (password !== value) {
										callback(this.$t('loginAndReg.rePasswdWrongTips'));
									}
								}
							}
						}]
					},
					company: {
						rules: [{
							required: true,
							errorMessage: this.$t('loginAndReg.companyTips'),
						}]
					},
					contactName: {
						rules: [{
							required: true,
							errorMessage: this.$t('loginAndReg.linkmanTips'),
						}]
					},
					contactPhone: {
						rules: [{
							required: true,
							errorMessage: this.$t('loginAndReg.linkPhoneTips'),
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value.length < 5 || value.length > 12) {
									return callback(that.$t('loginAndReg.linkPhoneWrongTips'))
								}
								if (!that.formData.contactPhonePrefix) {
									callback(that.$t('loginAndReg.linkPhonePrefixTips'));
								}
							},
							trigger: 'blur',
						}]
					},
				},
			}
		},
		onReady() {
			this.$refs.regRef.setRules(this.formRules);
		},
		methods: {
			showMsg({ type, msg }) {
				this.msgType = type;
				this.messageText = msg;
				this.$refs.popup.open()
			},
			register(form) {
				const {
					account,
					password,
					company,
					contactName,
					contactPhone,
          contactPhonePrefix,
          email,
				} = this.formData;
				this.$refs.regRef.validate()
				.then(res => {
					return uni.request({
						url: api.regist,
            header: {
              'Content-Type': 'application/json',
              'lang' : localStorage.getItem('lang')||'zh'
            },
						method: 'POST',
						data: {
							account,
							password,
							company,
							contactName,
              email,
							contactPhone,
              contactPhonePrefix:`+${contactPhonePrefix.split(' +')[1]}`,
						}
					});
				})
				.then(res => {
					const {
						data,
					} = res[1] || {};
					const isSuccess = data.data === 1;
					if (!isSuccess) {
						this.showMsg({
							msg: `${data?.data?.msg || data?.msg}`,
							type: 'error',
						});
						return;
					}
					this.showMsg({
						msg: this.$t('loginAndReg.registerSuccess'),
						type: 'success',
					});
					return true;
				})
				.then(res => {
					if (res) {
						return uni.request({
							url: api.login,
              header: {
                'Content-Type': 'application/json',
                'lang' : localStorage.getItem('lang')||'zh'
              },
							data: {
								account,
								password: hex_md5(password),
                lang:localStorage.getItem('lang')||'zh'
							},
							method: 'POST',
							success: (res) => {
								const {
									status,
									msg,
									data,
								} = res.data || {};
								if (!status) {
									this.showMsg({
										msg: `${msg}`,
										type: 'error',
									})
									return;
								}
								this.showMsg({
									type: 'success',
									msg: this.$t('loginAndReg.loginSuccess'),
								});
								uni.setStorageSync('id_token', data?.token);
								uni.setStorageSync('userInfo', data?.memberInfo);
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/about/about'
									});
								}, 1000);
							},
						})
					}
				})
				.catch(err => {
				})
				
			}
		}
	}
</script>

<style>

</style>
